<template>
	<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
		lower-threshold="112">
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="搜索表情" v-model="searchKey" confirm-type="search" @blur="searchEmojis"></input>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="grid col-4 grid-square">
				<view class="bg-img solid" @tap="showModal" data-target="Image" :data-index="index"
					v-for="(item,index) in avatar" :key="index"
					:style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<!-- <view class="bg-img" :style="[{ backgroundImage:'url(' + modalImg + ')',height:'600px' }]">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view> -->
				<image :src="modalImg" mode="widthFix"></image>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="download">保存</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	//引入
	import { emoji } from '@/api/emoji.js';
	export default {
		data() {
			return {
				CustomBar: 0,
				page: 1,
				searchKey: '',
				avatar: [],
				modalName: null,
				modalImg: null
			};
		},
		onLoad() {
			this.loadEmojis()
		},
		methods: {
			loadEmojis() {
				if(this.searchKey != '') {
					emoji({page: this.page, keyword: this.searchKey}).then(res => {
						if (res != null && res.list.length > 0) {
							this.avatar.push(...res.list)
						}
						this.page++
					}).catch(err => {
						console.error('获取错误:', err);
					});
				} else {
					emoji({page: this.page}).then(res => {
						if (res != null && res.list.length > 0) {
							this.avatar.push(...res.list)
						}
						this.page++
					}).catch(err => {
						console.error('获取错误:', err);
					});
				}
				
			},
			lower() {
				console.log('触底加载')
				this.loadEmojis()
			},
			searchEmojis(e) {
				console.log(this.searchKey)
				this.page = 1
				this.avatar = []
				this.loadEmojis()
			},
			showModal(e) {
				this.modalImg = this.avatar[e.currentTarget.dataset.index]
				console.log(this.modalImg)
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			download() {
				// 下载图片
				uni.downloadFile({
					url: this.modalImg,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		padding-top: 50px;
	}
	.scrollbox {
		height: 100vh;
		/* height: calc(100vh - 580rpx); */
	}
</style>